<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '新增课程' : '编辑课程'" append-to-body width="680px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body >
            <el-form-item label="互动教室" prop="crId">
                <el-select v-model="form.crId"   filterable placeholder="请选择" style="width: 505px;" @change="ClassType">
                    <el-option
                        v-for="item in roomNames"
                        :key="item.id"
                        :label="item.roomName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="教室类型">
                <el-input v-model="form.roomType" :readonly="true" style="width: 505px;display:none"/>
                <div style="width: 505px" class="computedFee">{{computedFee}}</div>
            </el-form-item>


            <el-form-item label="上课时间" prop="weekNo">
                <el-select v-model="form.weekNo" clearable  filterable placeholder="请选择周几" style="width: 106px;">
                    <el-option
                        v-for="item in weeks"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>   

            <el-form-item label="" prop="lessonNo" label-width="10px">
                <el-select v-model="form.lessonNo" clearable  filterable placeholder="请选择课节" style="width: 106px;">
                    <el-option
                        v-for="item in kejie"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>  

            <el-form-item label="" prop="startTimeString" label-width="10px">
                <el-time-select
                    placeholder="起始时间"
                    v-model="form.startTimeString"
                    value-format="HH-mm-ss"
                    :picker-options="{
                    start: '05:00',
                    step: '00:05',
                    end: '22:30'
                    }" style="width: 130px;">
                </el-time-select>
            </el-form-item> 

            <el-form-item label="" prop="endTimeString" label-width="0px">
                <el-time-select
                    placeholder="结束时间"
                    v-model="form.endTimeString"
                    value-format="HH-mm-ss"
                    :picker-options="{
                    start: '05:00',
                    step: '00:05',
                    end: '22:30',
                    minTime: form.startTimeString
                    }" style="width: 130px;">
                </el-time-select>
            </el-form-item>  


            <el-form-item label="主讲老师" prop="lectureTeaId">
                <el-select v-model="form.lectureTeaId" clearable  filterable placeholder="请选择" style="width: 200px;">
                    <el-option
                        v-for="item in lectureTeaIds"
                        :key="item.teaId"
                        :label="item.teaName"
                        :value="item.teaId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="上课科目" prop="subjectId">
                <el-select v-model="form.subjectId" clearable  filterable placeholder="请选择" style="width: 200px;">
                    <el-option
                        v-for="item in couNames"
                        :key="item.id"
                        :label="item.couName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="听讲学校" prop="schId">
                <el-select v-model="form.schId" clearable   :disabled="disabled" filterable placeholder="请选择" style="width: 505px;">
                    <el-option
                        v-for="item in schList"
                        :key="item.schId"
                        :label="item.schName"
                        :value="item.schId">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="直播互动教室" prop="checked" >
               <el-checkbox v-model="checked"></el-checkbox>
            </el-form-item>

            <el-form-item label="" prop="liveRoomName" label-width="10px">
                <el-input v-model="form.liveRoomName" style="width: 476px;" placeholder="请输入直播互动教室名称" maxlength="25" minlength="2" clearable/>
            </el-form-item>

            <el-form-item label="听讲教室" prop="assistRoom" v-if="checked != true">
                <el-select v-model="form.assistRoom" clearable  filterable placeholder="请选择" style="width: 505px;" @change="getClass">
                    <el-option
                        v-for="item in roomNames"
                        :key="item.id"
                        :label="item.roomName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="听讲班级" prop="assistClassName">
                <el-input v-model="form.assistClassName" style="width: 200px;" placeholder="请输入听讲班级" maxlength="30" minlength="2" clearable/>
            </el-form-item>


            <el-form-item label="听讲老师" prop="assistTeaId">
                <el-input v-model="form.assistTeaId" style="width: 200px;" placeholder="请输入听讲老师" maxlength="12" minlength="2" clearable/>
            </el-form-item>

            

            <el-form-item label="备注">
                <div style="margin-top:10px;"></div>
                <el-input v-model="form.planRemarks" style="width: 505px;" rows="3"  placeholder="请输入上课注意事项或调课信息等" type="textarea" maxlength="30"  clearable show-word-limit />
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" >确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { courseReady, courseSave } from '@/api/request'
import { roomTypeId } from '@/api/data'
import { validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        // schcut:{
        //     type: Array,
        //     required: true
        // }
    },
    data() {
        const validatestuId = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户账号不能为空'))
            }
            if (!validateUserId(value)) {
                callback(new Error('请输入正确的用户账号'))
            }
            else {
                callback()
            }
        };
        return {
            checked:'',
            meters:'',
            phname:[],
            roomNames:[],
            couNames:[],
            schList:[],
            lectureTeaIds:[],
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: {
                id:'',
                schId: "", 
                crId: "",  //互动教室id
                terminfoId:'',               //学期id
                roomType:'',                 //教室类型
                weekNo:'' ,                  //周几
                lessonNo:'',                 //课节
                startTimeString:'',          //开始时间
                endTimeString:'',            //结束时间
                lectureTeaId:'',             //主讲老师id
                subjectId:'',                //科目
                liveRoomName:'',             //直播互动教室
                assistRoom:'',               //听讲教室
                assistClassName:'',          //听讲班级
                assistTeaId:'',              //听讲老师
                planRemarks:'',              //备注
            },
            rules: {
                crId:[
                    { required: true, trigger: 'blur',message: '请选择互动教室'},
                ],
                weekNo:[
                    { required: true, trigger: 'blur', message: '请选择周几',},
                ],
                lessonNo:[
                    { required: true, trigger: 'blur', message: '请选择课节',},
                ],
                startTimeString:[
                    { required: true, trigger: 'blur', message: '请选择开始上课时间',},
                ],
                endTimeString:[
                    { required: true, trigger: 'blur', message: '请选择结束时间',},
                ],
                lectureTeaId:[
                    { required: true, trigger: 'blur', message: '请选择主讲老师',},
                ],
                subjectId:[
                    { required: true, trigger: 'blur', message: '请选择科目',},
                ],
                schId:[
                    { required: true, trigger: 'blur', message: '请选择听讲学校',},
                ],
                assistRoom:[
                    { required: true, trigger: 'blur', message: '请选择听讲教室',},
                ],
                assistClassName:[
                    { required: true, trigger: 'blur', message: '请输入听讲班级',},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                assistTeaId:[
                    { required: true, trigger: 'blur', message: '请输入听讲老师',},
                    {validator:validateEmpty,trigger: 'blur',}
                ],

            },
            kejie:[
                {
                    id: '0',
                    name: '早读'
                },
                {
                    id: '1',
                    name: '第一节'
                },
                {
                    id: '2',
                    name: '第二节'
                },
                {
                    id: '3',
                    name: '第三节'
                },
                {
                    id: '4',
                    name: '第四节'
                },
                {
                    id: '5',
                    name: '第五节'
                },
                {
                    id: '6',
                    name: '第六节'
                },
                {
                    id: '7',
                    name: '第七节'
                },
                {
                    id: '8',
                    name: '第八节'
                },
                {
                    id: '9',
                    name: '晚读'
                },
                {
                    id: '10',
                    name: '晚自1'
                },
                {
                    id: '11',
                    name: '晚自2'
                },
                {
                    id: '12',
                    name: '晚自3'
                },
            ],
            weeks:[
                {
                    id: '0',
                    name: '周一'
                },
                {
                    id: '1',
                    name: '周二'
                },
                {
                    id: '2',
                    name: '周三'
                },
                {
                    id: '3',
                    name: '周四'
                },
                {
                    id: '4',
                    name: '周五'
                },
                {
                    id: '5',
                    name: '周六'
                },
                {
                    id: '6',
                    name: '周天'
                },
            ]
        }
    },
    mounted(){
    //    this.init()
    },
    computed : {
        computedFee() {
            let roomType = this.form.roomType
            // console.log(roomType)
            return   roomType == 0 ? '精品教室' : roomType == 1 ? '主讲教室' : roomType == 2 ? '专业互动教室' : roomType == 3 ? '直播互动教室' : roomType == 4 ? '直播教室': roomType == '' ? '' :'未知';                
        }
    },
    methods: {
        init(){
            courseReady(this.form).then(res =>{
                let {courseinfoList,teaList,roomList,schList,terminfoId,crId,roomType} = res
                this.couNames = courseinfoList
                this.lectureTeaIds = teaList
                this.roomNames  = roomList
                this.schList  = schList
                this.form.crId = crId
                this.form.terminfoId = terminfoId
                this.form.roomType = roomType
            }) 
        }, 
        ClassType(){
            roomTypeId(this.form.crId).then(res =>{
                this.form.roomType   = res.data.roomType
            }) 
        },        
        getClass(){
            let Zhu = this.form.crId,
                Tin = this.form.assistRoom;
            if (Zhu  == Tin ) {
                this.$message.warning('互动教室不可以作为听讲教室');
                return this.form.assistRoom  = ''
            }
        },
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                if (valid){
                    courseSave(this.form).then(res => {
                        // console.log(res)
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.toQuery()
                    })
                }else {
                    return false
                }

            })

        },500)
        
    },

}
</script>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
.computedFee{
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    font-size:12px;
    padding-left: 14px;
    height: 32px;
}
</style>
